<template>
	<view class="wrap">
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">活动详情</block>
		</custom-nav-sq-xcx>
		<view class="hdTitWrap">
			<view class="hdTit">
				<view class="hdName">福建师大健康健康减肥的手机费</view>
				<view class="tagBox hasFlex">
					<view class="tagItem bm">可报名</view>
					<view class="tagItem gm">可观摩 </view>
				</view>
				<view class="hdDetItem hasFlex">
					<image class="detImg" :src="getStaticFilePath('address.png')"></image>
					<view class="address">地址：复方丹参规范的轮廓更加发开了房间多少</view>
				</view>
				<view class="hdDetItem hasFlex">
					<image class="detImg" :src="getStaticFilePath('sq-time.png')"></image>
					<view><text class="timeTxt">时间：</text><text class="time">2023-12-20</text><text class="till">至</text><text class="time">2023-12-22</text></view>
				</view>
			</view>
		</view>
		<view class="hdContent">
			<view class="hdTj hasFlex">
				<view class="tjItem">
					<view class="tjCon">60</view>
					<view class="tjTit">浏览次数</view>
				</view>
				<view class="tjItem">
					<view class="tjCon">20</view>
					<view class="tjTit">收藏人数</view>
				</view>
				<view class="tjItem">
					<view class="tjCon">20</view>
					<view class="tjTit">报名人数</view>
				</view>
				<view class="tjItem">
					<view class="tjCon">268</view>
					<view class="tjTit">观摩人数</view>
				</view>
			</view>
			<view class="detCon">
				<view class="conItem">
					<view class="conTit">活动内容</view>
					<view class="content">反倒是附近国际法的离开过家放得开了国家反倒是交流看法介绍发了多少空间裂缝感觉到</view>
				</view>
				<view class="conItem">
					<view class="conTit">精彩回顾</view>
					<view class="content">反倒是附近国际法的离开过家放得开了国家反倒是交流看法介绍发了多少空间裂缝感觉到</view>
				</view>
			</view>
			<view class="detCon">
				<view class="conTit">活动评论</view>
				<hd-pl-list></hd-pl-list>
			</view>
			<view class="detCon">
				<view class="conItem">
					<view class="conTit">注意事项</view>
					<view class="notice">
						<view class="noticeItem">
							<view class="cir">●</view>
							<view>本活动可报名或可观摩且只能选择一种</view>
						</view>
						<view class="noticeItem">
							<view class="cir">●</view>
							<view>本活动允许用户发布评论</view>
						</view>
						<view class="noticeItem">
							<view class="cir">●</view>
							<view>活动一旦过期不可报名且不可观摩</view>
						</view>
						<view class="noticeItem">
							<view class="cir">●</view>
							<view>活动结束日期2023-12-20</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<hd-btn @goGmBm="goGmBm"></hd-btn>
		<uni-popup ref="bmPop" type="bottom">
			<view class="popuoView">
				<bm-pop :isDisabledFlag="isDisabledFlag" :applyBtnTit="applyBtnTit"></bm-pop>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import HdPlList from './components/HdPlList.vue'
	import HdBtn from './components/HdBtn.vue'
	import BmPop from './components/BmPop'
	export default {
		components:{
			HdPlList,
			HdBtn,
			BmPop
		},
		data(){
			return{
				applyBtnTit:'',
				isDisabledFlag:false
			}
		},
		methods:{
			goGmBm(type){
				this.$refs.bmPop.open();
				this.applyBtnTit = type == 'gmType' ? '申请观摩' : '提交报名';
			}
		}
	}
</script>
<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss">
	$font:'Staatliches';
	page{
		background: $sq-fuf;
	}
	.wrap{
		padding-bottom: 120rpx;
	}
	.hdTitWrap{
		background: $pss-sq-main-bg;
		height: 370rpx;
		padding: 1rpx 30rpx 0;
		.hdTit{
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-top: 50rpx;
			color: $sq-main0;
		}
		.hdName{
			font-size: 32rpx;
			font-weight: 600;
		}
		.tagBox{
			margin: 20rpx 0;
		}
		.tagItem{
			padding: 0 20rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: pink;
			font-size: 24rpx;
			border-radius: 8rpx;
			&:first-child{
				margin-right: 20rpx;
			}
			&.bm{
				background: #967DF8;
				color: #fff;
			}
			&.gm{
				background: $sq-fue;
				color: $pss-sq-main;
			}
		}
		.hdDetItem{
			font-size: 26rpx;
			margin-bottom: 15rpx;
			.detImg{
				width: 36rpx;
				height: 36rpx;
				margin-right: 15rpx;
				flex-shrink: 0;
			}
			.address,
			.timeTxt{
				color: $sq-main8;
			}
			.time,
			.till{
				color: $pss-sq-main;
			}
			.till{
				margin: 0 10rpx;
			}
		}
	}
	.hdContent{
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -30rpx;
		background: $sq-fuf;
		padding: 30rpx;
		.hdTj{
			background: $sq-fue;
			padding: 20rpx 0;
			border-radius: 20rpx;
			border: 2rpx solid #D9D5F7;
			.tjItem{
				flex: 1;
				text-align: center;
				font-size: 26rpx;
				color: $sq-main8;
			}
			.tjCon{
				font-family: $font;
				font-size: 38rpx;
				color:$pss-sq-main;
			}
		}
		.detCon{
			padding: 20rpx;
			background: #fff;
			margin-top: 30rpx;
			border-radius: 20rpx;
			.noticeItem{
				display: flex;
				line-height: 42rpx;
				font-size: 28rpx;
				color: $sq-main0;
				.cir{
					margin-right: 10rpx;
				}
			}
			.conItem{
				color: $sq-main0;
				margin-bottom: 30rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.conTit{
				font-size: 32rpx;
				color: $sq-main0;
				font-weight: 600;
				padding: 10rpx 0 15rpx;
			}
			.content{
				font-size: 28rpx;
			}
		}
	}
</style>